บทความนี้ขอกล่าวถึงเรื่องการสร้าง Dialog Box ด้วย jQuery UI (User Interface) ซึ่งเปรียบเสมือน Library ที่มีเครื่องมือ (Widgets) ต่าง ๆ ให้เราสามารถนำมาใช้งานได้ทันที่ ซึ่งรวมไปถึง Dialog Box ด้วยเช่นกัน
ภาพรวมของ Dialog Box jQuery UI
1. แสดงผล Elements ที่ต้องการในรูปแบบของ Dialog Box
2. จำเป็นต้องเรียกใช้ไฟล์ jquery, jquery ui และ css สำหรับ ui เพื่อการใช้งาน jQuery UI
3. ใช้คำสั่ง $('[Target_Element]').dialog() ในการเรียกใช้งานแบบ Dialog Box
4. เว็บไซต์อ้างอิง http://jqueryui.com/dialog/#default
ตัวอย่างโปรแกรม
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>amplysoft.com</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
</head>
<body>
<input type='button' value='show dialog' />
<div id="dialog" title="Basic dialog" style="display:none">
<p>Hello, AmplySoft.</p>
</div>
<script type="text/javascript">
$('input').click(function(){
$( "#dialog" ).dialog();
});
</script>
</body>
</html>
ผลลัพธ์
